
let controller ;
async function canCancelFetch(){
    // 在需要取消请求的地方调用 controller.abort()
    controller&&controller.abort();
    // 创建 AbortController 实例
    controller = new AbortController();
    
    // 获取 AbortController 的 signal 属性
    const signal = controller.signal;
    // 使用 Fetch API 发起网络请求，传递 signal 作为 signal 选项
    await fetch(url, { signal:signal })
    .then(response => {
        // 处理响应
        return response.json()
    }).catch(error => {
        // 检查错误类型是否为 AbortError
        if (error.name === 'AbortError') {
            console.log('Request was cancelled');
        } else {
            console.log('Request failed:', error);
        }
    });
}


// xhr 方式
const xhr = new XMLHttpRequest()
xhr.open(method,url)
xhr.send()
// 然后在某个时间点调⽤ abort() ⽅法
xhr.abort();

// axios 方式
// 创建 CancelToken 实例
const source = axios.CancelToken.source();
// 发起 GET 请求，传递 cancelToken 选项
axios.get('/api/data', {
  cancelToken: source.token
}).then(response => {
  // 处理响应
}).catch(error => {
  // 检查是否为取消请求的错误
  if (axios.isCancel(error)) {
    console.log('请求已被取消：', error.message);
  } else {
    console.log('请求出错：', error.message);
  }
});

// 在需要取消请求的地方调用 source.cancel()
// 例如，可通过按钮点击等用户交互触发取消操作
// source.cancel('请求已被用户取消');